:root{
  --bg-left:#F6F8FB;      /* 左侧栏浅灰 */
  --bg-right:#FAFBFD;     /* 右侧统一灰白 */
  --blue:#2F6F7E;
  --blue-hover:#2B5E72;
  --line:#E3E8EE;
  --line-soft:#EDF1F5;
  --text:#1F2937;
  --bubble:#FFFFFF;
}
*{box-sizing:border-box}
html,body{height:100%}
.shell { min-height:100vh;}
body{
  margin:0;
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
  font-size: 12px; /* ≈ 9pt */
  color:var(--text);
}
.shell{display:flex;min-height:100vh}

/* 左侧 */
.sidebar{
  width:260px;background:var(--bg-left);border-right:1px solid var(--line);
  padding:12px;display:flex;flex-direction:column;gap:10px
}
.brand{font-weight:700;font-size:14px;margin:4px 4px 8px}
.session-list{flex:1;overflow:auto;border-top:1px solid var(--line-soft);padding-top:8px}
.session-item{
  padding:10px;border-radius:10px;margin:8px 4px;background:#fff;border:1px solid var(--line);cursor:pointer;
  box-shadow:0 1px 2px rgba(16,24,40,.04)
}
.session-item.active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(47,111,126,.12)}

/* 关键2：右侧整列与聊天容器要有 min-height:0，允许中间子项溢出滚动 */
.workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-right);
    min-height: 0;
}

.chat-fill {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 14px;
    min-height: 0;
}

.topbar{
  height:52px;background:var(--blue);color:#fff;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid #254f59
}
.topbar .title{font-weight:700}

/* 充满的聊天区域 */
.chat-fill{
  flex:1;display:flex;flex-direction:column;
  padding:16px 18px 14px 18px;
}
/* 顶部标题占内容高度即可（保持不滚动） */
.chat-header {
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
}


/* 关键3：中间消息区成为唯一滚动区 */
.messages {
    flex: 1;
    min-height: 0; /* 允许收缩 min-height:0 是 Flex 布局里让子项可以被压缩的关键，否则中间区会“撑破”容器，把底部挤出视口。*/
    overflow-y: auto; /* 垂直滚动 */
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-right);
}
/* 消息气泡：白色卡片 + 轻阴影，更美观 */
.msg{
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bubble);
  line-height:1.6;white-space:pre-wrap;word-break:break-word;
  box-shadow:0 2px 8px rgba(16,24,40,.04)
}
.msg.user{background:#ffffff}
.msg.assistant{background:#ffffff}
.msg.assistant.streaming{border-style:dashed}

/* 输入区 */
/* 底部输入区固定在底（不随内容滚） */
.composer {
    margin-top: 10px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding-top: 10px;
}
#prompt{
  flex:1;min-height:80px;max-height:180px;resize:vertical;
  border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff;outline:none;
}
#prompt:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(47,111,126,.12)}
.actions{display:flex;gap:8px}

/* 按钮 */
.btn{height:34px;padding:0 16px;border-radius:10px;border:1px solid transparent;font-weight:700;cursor:pointer;transition:all .15s ease}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-hover)}
.btn-secondary{background:#EEF3F6;color:#334155;border-color:#D7DEE5}
.btn-ghost{background:#fff;border:1px solid #D7DEE5;color:#475569}
.btn-ghost:hover{background:#F7FAFC}

.wide{width:100%}